<!--安排考试-->
<template>
  <div class="wrapper-container" style="width:100%">
    <div class="table-container" style="margin:0">
      <el-table
        :data="tableData"
        :span-method="arraySpanMethod"
        style="width: 100%"
        class="xpaas-table-class"
        row-class-name="xpaas-row-class"
        cell-class-name="xpaas-cell-class"
        header-row-class-name="xpaas-header-row-class"
        header-cell-class-name="xpaas-header-cell-class"
      >
        <el-table-column width="130px" label="操作" align="center" prop="exaSetting">
          <template slot-scope="scope">
            <div class="bk-lucj-expot-button" @click="exaSetting" style="background: #f1fff8;
              border: 1px solid #02c86c">
              <!-- <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> -->
              <span style="color: #02c86c;">考场设置</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="exadate" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="exaschedule" label="节次" align="center">
        </el-table-column>
        <el-table-column prop="department" label="系" align="center">
        </el-table-column>
        <el-table-column prop="teachingandresearchsection" label="教研室" align="center">
        </el-table-column>
        <el-table-column prop="coursename" label="课程名称" align="center">
        </el-table-column>

        <el-table-column prop="teachingfaculty" label="授课教员" align="center">
        </el-table-column>
        <el-table-column prop="finalexamination" label="考试方式" align="center">
        </el-table-column>
        <el-table-column prop="situdemand" label="场地需求" align="center">
        </el-table-column>
        <el-table-column prop="studentTeam" label="队别" align="center">
        </el-table-column>
        <el-table-column prop="studentlevel" label="级次" align="center">
        </el-table-column>
        <el-table-column prop="className" label="专业班次" align="center" width="200">
          <template slot-scope="scope">
            <div v-for="(item,index) in scope.row.className" key="index">
              <span>{{ item.name }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="biggernumber" label="人数" align="center">
        </el-table-column>
        <el-table-column
          width="130px"
          prop="exasite"
          label="考场"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.exasite"
              >{{ scope.row.exasite
              }}<i @click="changeSite(scope.row)" style="color: #02c86c;margin-left:5px;cursor: pointer;" class="el-icon-edit"></i
            ></span>
            <span v-else>
              <div class="bk-lucj-expot-button" @click="changeSite(scope.row)" style="background: #efebff;
                border: 1px solid #5230e9">
                <!-- <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> -->
                <span style="color: #5230e9;">选择场地</span>
              </div>
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="exaterid"
          width="130px"
          label="监考员"
          align="center"
        >
          <template slot-scope="scope">
            <div v-if="scope.row.exatername.length > 0 && (typeof scope.row.exatername) == 'object'">
              <div v-for="(item) in scope.row.exatername" key="index" class="name-button">
                <span>{{ item }}</span>
              </div>
              <span @click="setTeacher(scope.row)" style="color: #02c86c;margin-left:5px;
              cursor: pointer;
              position: absolute;
              top: 42%;
              left: 75%;" class="el-icon-edit"></span>
            </div>
            <div v-if="scope.row.exatername && (typeof scope.row.exatername) == 'string'">
              <!-- <div v-for="(item) in scope.row.exaterid" key="index" class="name-button"> -->
                <span>{{ scope.row.exatername }}</span>
              <!-- </div> -->
              <span @click="setTeacher(scope.row)" style="color: #02c86c;margin-left:5px;
              cursor: pointer;
              position: absolute;
              top: 42%;
              left: 75%;margin-left:5px" class="el-icon-edit"></span>
            </div>
            <div v-if="scope.row.exatername == ''">
              <div class="bk-lucj-expot-button" @click="setTeacher(scope.row)" style="background: #f1fff8;
                border: 1px solid #02c86c">
                <span style="color: #02c86c;">设置监考员</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="备注" align="center">
        </el-table-column>
      </el-table>
      <el-dialog title="设置考场" :visible.sync="exaSettingDialog" width="983px">
        <el-tree
          :data="treeSpeclassData"
          node-key="id"
          :props="defaultProps"
          default-expand-all
          @node-drag-start="handleDragStart"
          @node-drag-enter="handleDragEnter"
          @node-drag-leave="handleDragLeave"
          @node-drag-over="handleDragOver"
          @node-drag-end="handleDragEnd"
          @node-drop="handleDrop"
          draggable
          :allow-drop="allowDrop">
          <!-- :allow-drag="allowDrag" -->
        </el-tree>
      </el-dialog>
      <el-dialog title="选择场地" :visible.sync="dialogShow" width="1500px">
        <div style="display: flex; border-bottom: 3px solid #427EBC; height: 50px; margin: 0 -25px;">
          <div :class="showType === 1 ? 'selectedStyle' : 'tabButton'" style="width: 90px;" @click="handleChangeType(1)">
            按建筑物
          </div>
          <div :class="showType === 2 ? 'selectedStyle' : 'tabButton'" style="width: 70px;" @click="handleChangeType(2)">
            按部门
          </div>
          <div :class="showType === 3 ? 'selectedStyle' : 'tabButton'" style="width: 70px;" @click="handleChangeType(3)">
            按类型
          </div>
          <div style="display: flex; margin-top: 9px; margin-left: 200px;">
            <el-input v-model="searchKey"  clearable size="small" placeholder="请输入场地场所名称" />
          </div>
          <div class="cjrc-button" style="margin: 11px 0 0 20px; width: 70px; background: #f1f8fe; border: 1px solid #51aef6; color: #51aef6;" @click="handleSearch">
            <span>查询</span>
          </div>
        </div>
        <div>
          <div style="float: left; width: 300px; height: 655px; border-right: 3px solid #427EBC; padding-top: 10px;">
            <el-tree v-show="showType !== 2" :data="treeData1" :props="treeProps1" @node-click="handleNodeClick" />
            <el-tree v-show="showType === 2" :data="treeData2" :props="treeProps2" @node-click="handleNodeClick" />
          </div>
          <div style="float: right; width: 1140px; height: 655px; padding-top: 20px;">
            <el-table
              :data="treeTableData"
              ref="multipleTable"
              :height="530"
              class="xpaas-table-class"
              row-class-name="xpaas-row-class"
              cell-class-name="xpaas-cell-class"
              header-row-class-name="xpaas-header-row-class"
              header-cell-class-name="xpaas-header-cell-class">
              <el-table-column width="75" align="center" type="selection" />
              <el-table-column prop="cdmc" label="场地场所名称" align="center" />
              <el-table-column prop="mj" label="面积（平方米）" align="center" />
              <el-table-column prop="krnrs" label="容纳人数" align="center" />
              <el-table-column prop="cdlx" label="场地场所类型" align="center" />
              <el-table-column prop="ssxq" label="所属校区" align="center" />
              <el-table-column prop="ssjzw" label="所属建筑物" align="center" />
              <el-table-column prop="mangdept" label="管理部门" align="center" />
              <el-table-column prop="col8" label="楼层" align="center" />
            </el-table>
            <div style="float: right; margin: 10px 0;">
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
              </el-pagination>
            </div>
            <div style="display: flex;">
              <div class="report-button" style="margin-left: 450px; width: 80px; height: 35px; line-height: 35px; background: #FFF6F0; border: 1px solid #E9B535; color: #E9B535;" @click="handleSure">
                <span>确定</span>
              </div>
              <div class="report-button" style="width: 80px; height: 35px; line-height: 35px; background: #FFEEEF; border: 1px solid #FA533C; color: #FA533C;" @click="dialogShow = false">
                <span>取消</span>
              </div>
            </div>
          </div>
        </div>
      </el-dialog>
      <el-dialog title="设置监考员" :visible.sync="showYprDialog" width="983px" class="szjky">
        <div class="choose-ypr-container">
          <div class="choose-ypr-search-container">
            <span class="title">单位：</span>
            <el-select
              v-model="company"
              style="width: 100px; margin-right: 30px"
              size="mini"
              clearable
              placeholder="请选择"
            >
              <el-option
                v-for="item in companyList"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            <el-input
              style="width: 152px; margin-right: 20px"
              size="mini"
              v-model="courseYpr"
              placeholder="关键字搜索"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>
            <div class="search-button" style="display: inline-flex;position: relative;top: 5px;" @click="searchTeacher">
              <img src="../../../assets/assessment/icon-search.png" alt="" />
              <span>查询</span>
            </div>
            <div class="button-list">
              <div
                class="button-item"
                v-for="(item, index) in searchNameList"
                :key="index"
                @click="delTag(index)"
              >
                <img
                  class="del-icon"
                  src="../../../assets/assessment/approval-del.png"
                  alt=""
                />
                <div>{{ item }}</div>
              </div>
            </div>
          </div>
          <div class="choose-ypr-table-container">
            <el-table
              :data="yprList"
              max-height="550"
              ref="multipleTableExter"
              style="width: 100%;margin-top:15px"
              class="xpaas-table-class"
              row-class-name="xpaas-row-class"
              cell-class-name="xpaas-cell-class"
              header-row-class-name="xpaas-header-row-class"
              header-cell-class-name="xpaas-header-cell-class"
              @selection-change="handleSelectionChange"
            >
              <el-table-column
                type="selection"
                width="155">
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="153"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="sex" label="性别" width="154" align="center">
              </el-table-column>
              <el-table-column
                prop="unit"
                label="单位"
                width="153"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="job" label="职务" align="center">
              </el-table-column>
            </el-table>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <button class="green" @click="exaTeaok">确 定</button>
        </span>
      </el-dialog>
    </div>

    <div style="display: flex; justify-content: space-between">
      <div class="table-container table-container2">
        <el-table
          :data="[{ calValue: '' }]"
          style="width: 100%"
          max-height="600"
          class="xpaas-table-class"
          row-class-name="xpaas-row-class"
          cell-class-name="xpaas-cell-class"
          header-row-class-name="xpaas-header-row-class"
          header-cell-class-name="xpaas-header-cell-class"
        >
          <el-table-column width="550" prop="date" label="日期" align="center">
            <template slot="header" slot-scope="scope">
              日期<i
                style="font-size: 20px; margin-left: 10px"
                class="el-icon-date"
              ></i>
              <!-- <el-date-picker
              v-show=""
                v-model="selPickerValue"
                type="date"
                :default-value="calValue"
                placeholder="选择日期">
              </el-date-picker> -->
            </template>
            <el-calendar v-model="calValue">
              <!-- @click="selCalender" -->
              <template slot="dateCell" slot-scope="{date, data}">
                <div @click="selCalender(data)">
                <!-- slot="dateCell" slot-scope="{date, data}" -->
                <p :class="data.isSelected ? 'is-selected' : ''">
                  {{ data.day.split('-').slice(2).join('-') }} {{ data.isSelected ? '✔️' : ''}}
                </p>
              </div>
              </template>
            </el-calendar>
          </el-table-column>
          <el-table-column prop="times" label="节次" align="center">
            <template slot-scope="scope">
             <div>
              <el-checkbox-group v-model="checkboxGroup" style="display: grid;">
                <el-checkbox-button v-for="(city,index) in times" :label="city" :key="index" @change="selectJC">{{city}}</el-checkbox-button>
              </el-checkbox-group></div>
              <!-- <div
                style="
                  display: flex;
                  flex-direction: column;
                  justify-content: space-around;
                  height: 400px;
                  align-items: center;
                "
              >
                <div
                  class="basic-button1"
                  v-for="(time, index) in times"
                  :key="index"
                  :style="{ color: time.color }"
                  @click="changeSection"
                >
                  {{ time.text }}
                </div>
              </div> -->
            </template>
          </el-table-column>
        </el-table>
        <!-- <div @click="saveDate">保 存</div> -->
      </div>
      <div style="width: 50%">
        <div class="search-container">
          <span style="color:#004ca7;line-height:30px">场地名称：</span>
          <el-input v-model="cdmc" clearable size="mini" style="width:160px" placeholder="请输入场地名称"></el-input>
          <span style="color:#004ca7;line-height:30px;margin-left:15px">建筑物：</span>
          <el-input v-model="ssjzw" clearable size="mini" style="width:160px" placeholder="请输入建筑物"></el-input>
          <span style="color: #004ca7;line-height:30px;margin-left:15px">考位数：</span>
          <el-input type="number" v-model="zwsTop" style="width: 80px" size="mini"></el-input>
          <span style="line-height:30px">&nbsp;-&nbsp;</span>
          <el-input type="number" v-model="zwsLow" style="width: 80px" size="mini"></el-input>
          <div class="search-button" style="margin:2px 0 0 15px;" @click="searchSite">
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
          <!-- <span style="color: #004ca7; margin: 0 20px"
            >本班教室：{{ myClass }}</span
          >
          <span style="color: #004ca7">{{ isAsTestPosition }}</span> -->
        </div>
        <div class="table-container table-container3">
          <el-table
            :data="tableData2"
            style="width: 100%"
            max-height="450"
            class="xpaas-table-class"
            row-class-name="xpaas-row-class"
            cell-class-name="xpaas-cell-class"
            header-row-class-name="xpaas-header-row-class"
            header-cell-class-name="xpaas-header-cell-class"
          >
            <el-table-column prop="cdmc" label="场地名称" align="center">
              <template slot-scope="scope">
                <span :style="{ color: scope.row.isOccupy == true ? 'red' : '' }">
                  {{ scope.row.cdmc }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="ssjzw" label="建筑物" align="center">
              <template slot-scope="scope">
                <span :style="{ color: scope.row.isOccupy == true ? 'red' : '' }">
                  {{ scope.row.ssjzw }}
                </span>
              </template>
            </el-table-column>
            <el-table-column prop="krnrs" label="考位数" align="center">
              <template slot-scope="scope">
                <span :style="{ color: scope.row.isOccupy == true ? 'red' : '' }">
                  {{ scope.row.krnrs }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="选择" align="center">
              <template slot-scope="scope">
                <span style="color: red" v-if="scope.row.isOccupy == true">
                  被占用
                </span>
                <div v-if="scope.row.isOccupy == false" class="bk-lucj-expot-button" @click="setSiteid(scope.row)" style="background: #efebff;
                  border: 1px solid #5230e9">
                  <!-- <img src="../../../assets/assessment/icon-plan-record-detail.png" alt="" /> -->
                  <span style="color: #5230e9;">作为考场</span>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import SelectItem from "../../../components/SelectItem.vue";
import InputItem from "../../../components/InputItem.vue";
import ButtonItem from "../../../components/ButtonItem.vue";
import { getClassRoomTree, getDeptTree,tjqueryplaceinfo,placelike } from '@/api/classHoursAddList/addList';
import { editRemark } from '@/api/courseExame/coursePlan';
import { queryExaDetail,selectDetailsJob,getDeptList,occupyDate,getPlaceInfoList,occupyPlaceInfoListId,updateDatejc,updateRemark } from "@/api/courseAchievement/entryResults";

export default {
  components: {
    SelectItem,
    InputItem,
    ButtonItem,
  },
  data() {
    return {
      treeSpeclassData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // isOccupy:false,
      checkboxGroup:[],
      calValue: '',
      todayDate:'',
      selDate:'',
      selPickerValue:'',
      company:'',
      companyList:[],
      courseYpr:'',
      searchNameList: [],
      yprList:[],
      dialogShow:false,
      showYprDialog:false,
      exaSettingDialog:false,
      showType: 1,
      searchKey: '',
      treeData1: [],
      treeData2: [],
      tableData: [],
      treeTableData:[],
      handleSelection:[],
      handleSelectionStudy:[],
      treeProps1:{
        label: 'dictValue',
        children: 'childdictBizs'
      },
      treeProps2:{
        label: 'deptName',
        children: 'chilrenDept'
      },
      total: '',
      pageNo:1,
      pageSize:10,
      total:'',
      myClass: "501",
      isAsTestPosition: "可以作为考场",
      times: ["1","2","3","4","5","6","7","8","9","10"],
      positionName: "",
      building: "",
      posi1: "",
      posi2: "",
      tableData: [],
      tableData2: [],
      current:1,
      size:10,
      queryParamsForm: {
        id:this.$route.query.id,
        remark:''
      },
      // multipleSelection:[],
      occupyDate:[],
      cdmc:'',ssjzw:'',zwsTop:'',zwsLow:'',
      setexaterId:'',
      setexaterList:[],
      ids:'',
      setTeacherInfo:{},
    };
  },
  computed: {
    config() {
      return {
        mergeTarget: "courseid", // 通用依据
        combineProp: [
          // combineProp - 根据mergeTarge 进行合并的单元格属性
          "exaSetting",
          "exadate",
          "exaschedule",
          "department",
          "teachingandresearchsection",
          "coursename",
          "teachingfaculty",
          "finalexamination",
          "situdemand",
        ],
      };
    },
  },
  watch: {},
  created() {
    var y = new Date().getFullYear();  
    var m = new Date().getMonth() + 1;  
    m = m < 10 ? ('0' + m) : m;  
    var dt = new Date().getDate();  
    var d = new Date().getDate();  
    d = d < 10 ? ('0' + d) : d;  
    // this.todayDate = y + '-' + m + '-' + dt;
    let dateToday = y + '-' + m + '-' + d;
    this.calValue = dateToday;
    this.todayDate = dateToday; 
  },
  mounted() {
    getDeptList().then(res=>{
      if(res.data.code == 200){
        this.companyList = res.data.data;
      }
    })
    this.getTeacher();
    this.queryExaDetail();
    // this.selCalender();
  },
  methods: {
    // 备注失去焦点时触发
    // async saveRemarks(row) {
    //   console.log(row)
    //   const obj = {
    //     id: row.remarkId,
    //     remark: row.remark,
    //   };
    //   const res = await updateRemark(obj);
    //   if (res.data.code == 200) {
    //     this.queryExaDetail();
    //     return "ok";
    //   }
    // },
    //转换日期格式
    // getCalender(){
    //   var y = this.calValue.getFullYear();  
    //   var m = this.calValue.getMonth() + 1;  
    //   m = m < 10 ? ('0' + m) : m;  
    //   var d = this.calValue.getDate();  
    //   d = d < 10 ? ('0' + d) : d;  
    //   return y + '-' + m + '-' + d;  
    // },
    //修改日期节次
    // saveDate(){
    // },
    selCalender(data){
      let date = data.day;
      this.selDate = date;
      let jc = this.checkboxGroup.join(',');
      let obj = {
        id:this.queryParamsForm.id,
        exadate:date,
        exaschedule:jc
      }
      if(this.todayDate >= date){
        this.$message({
          showClose: true,
          message: '请选择今天后的日期！',
          type: 'error'
        });
        return false
      } else {
        this.updatenewDateJc(obj);
      }
    },
    //左侧日历选择动态获取已被占用的节次
    /*  selCalender(){
      console.log(this.calValue)
      let dateSave = this.getCalender() + ' ' + '00:00:00';
      let obj = {
        id:this.queryParamsForm.id,
        exadate: dateSave,
      }
      console.log(obj)
      this.updatenewDateJc(obj);
      occupyDate().then(res=>{
        if(res.data.code == 200) {
          this.occupyDate = res.data.data;
          for(var i=0;i<this.occupyDate.length;i++){
            if(this.occupyDate[i].date == this.getCalender()){
              this.checkboxGroup = this.occupyDate[i].jc.split(',');
            }
          }
          let result = this.occupyDate.some(res=>{
            if(res.date == this.getCalender()){
              return true
            }
          })
          if(result == false){
            this.checkboxGroup = [];
          }
        }
      })
    }, */
    //获取所有的场地
    /* getPlaceList(){
      getPlaceInfoList(this.cdmc,this.ssjzw,this.zwsTop,this.zwsLow).then(res=>{
        if(res.data.code == 200){
          this.tableData2 = res.data.data;
          for(var i=0;i<this.tableData2.length;i++){
            this.tableData2[i].isOccupy = false;
          }
        }
      })
    }, */
    //选节次获取到被占用的场地
    selectJC(){
      let date = this.tableData[0].exadate == '' ? this.todayDate : this.tableData[0].exadate;
      // console.log(this.tableData[0].exadate)
      if(this.todayDate >= date){
        this.$message({
          showClose: true,
          message: '请先选择今天后的日期！',
          type: 'error'
        });
        return false
      } else {
        let jc = this.checkboxGroup.join(',');
        let obj = {
          id:this.queryParamsForm.id,
          exaschedule:jc,
          exadate:date,
        }
        this.updatenewDateJc(obj);
      }
    },
    //更新日期和节次
    updatenewDateJc(obj){
      let objDate = {
        id:this.queryParamsForm.id,
        exaschedule:obj.exaschedule,
        exadate:obj.exadate + ' ' + "00:00:00",
      }
      updateDatejc(objDate).then(res=>{
        if(res.data.code == 200){
          occupyPlaceInfoListId(obj.exadate,obj.exaschedule).then(res=>{
            if(res.data.code == 200){
              let arr = res.data.data;
              this.queryExaDetail();
              getPlaceInfoList(this.cdmc,this.ssjzw,this.zwsTop,this.zwsLow).then(result=>{
                if(result.data.code == 200){
                  this.tableData2 = result.data.data;
                  for(var i=0;i<this.tableData2.length;i++){
                    this.tableData2[i].isOccupy = false;
                    for(let j = 0;j < arr.length;j++){
                      if(this.tableData2[i].id === arr[j]){
                        this.tableData2[i].isOccupy = true; 
                      }
                    }
                  }
                }
              })
            }
          })
        }
      })
    },
    //考试设置拖拽
    handleDrop(draggingNode, dropNode, dropType, ev) {
      let objDate = {
        id:draggingNode.data.parentId,
        exasite:dropNode.parent.data.name ? dropNode.parent.data.name : '',
        siteid:dropNode.parent.data.id ? dropNode.parent.data.id : '',
      }
      editRemark(objDate).then(res=>{
        if(res.data.code == 200){
          this.exaSettingDialog = false;
          this.queryExaDetail()
          this.treeSpeclassData = [];
        }
      })
    },
    //判断是否可以拖拽
    allowDrag(draggingNode) {
      return draggingNode.level != 1;
    },
    //判断是否可以放置
    allowDrop(draggingNode, dropNode, type) {
      if (dropNode.data.level === 2) {
        return type !== 'inner';
      } else {
        return true;
      }
    },
    //表格数据
    queryExaDetail(){
      queryExaDetail(this.current,this.size,this.kpId,this.queryParamsForm).then(res=>{
        let data = res.data.data.records[0];
        this.tableData = res.data.data.records[0].examplancalssList;
        this.treeSpeclassData = []
        this.tableData = res.data.data.records[0].examplancalssList.map(function(item, index, arr) {
          const i = res.data.data.records[0].examplancalssList.find(_item => item.siteid === _item.siteid);
          if(i !== item) {
              i.specialtyClassInfo.className.push(item.specialtyClassInfo.className);
              i.specialtyClassInfo.id.push(item.specialtyClassInfo.id);
              i.specialtyClassInfo.pid.push(item.id);
              i.specialtyClassInfo.ratedNumber.push(item.specialtyClassInfo.ratedNumber);
              return undefined;
          } else {
              i.specialtyClassInfo.className = [i.specialtyClassInfo.className];
              i.specialtyClassInfo.id = [i.specialtyClassInfo.id];
              i.specialtyClassInfo.pid = [i.id];
              i.specialtyClassInfo.ratedNumber = [i.specialtyClassInfo.ratedNumber];
              return i;
          }
        }).filter(item => item !== undefined);
        for (let i = 0; i < this.tableData.length; i++) {
          let resultList = []
          for(let k=0; k < this.tableData[i].specialtyClassInfo.id.length; k++){
            let obj = {};
            obj.id = this.tableData[i].specialtyClassInfo.id[k];
            obj.name = this.tableData[i].specialtyClassInfo.className[k];
            obj.parentId = res.data.data.records[0].examplancalssList[k].id;
            resultList.push(obj);
          }
          this.tableData[i].className = resultList;
          this.treeSpeclassData.push({
            id: this.tableData[i].siteid,
            name: this.tableData[i].exasite,
            children: this.tableData[i].className
          })
          this.tableData[i].exadate = data.exadate.substring(0,10);
          this.tableData[i].exaschedule = data.exaschedule;
          this.tableData[i].exasite = this.tableData[i].exasite;
          this.tableData[i].department = data.courseimplementplan.department;
          this.tableData[i].teachingandresearchsection = data.courseimplementplan.teachingandresearchsection;
          this.tableData[i].coursename = data.courseimplementplan.coursename;
          this.tableData[i].teachingfaculty = data.courseimplementplan.teachingfaculty;
          this.tableData[i].finalexamination = data.courseimplementplan.finalexamination;
          this.tableData[i].situdemand = data.courseimplementplan.situdemand;
          this.tableData[i].studentTeam = this.tableData[i].specialtyClassInfo.studentTeam;
          this.tableData[i].studentlevel = this.tableData[i].specialtyClassInfo.year;
          if(this.tableData[i].specialtyClassInfo.ratedNumber.length > 1){
            var sum = this.tableData[i].specialtyClassInfo.ratedNumber.reduce((x, y) => Number(x) + Number(y));
            this.tableData[i].biggernumber = sum;
          } else {
            this.tableData[i].biggernumber = this.tableData[i].specialtyClassInfo.ratedNumber[0]
          }
          // this.tableData[i].className = this.tableData[i].specialtyClassInfo.className;
          this.tableData[i].remark = this.tableData[i].specialtyClassInfo.remark;
          this.tableData[i].remarkId = this.tableData[0].specialtyClassInfo.id;
          if(this.tableData[i].exaterid.indexOf(',') != -1){
            this.tableData[i].exaterid = this.tableData[i].exaterid.split(',');
          } else {
            let arrif = [];
            arrif.push(this.tableData[i].exaterid);
            this.tableData[i].exaterid = arrif[0];
          }
          if(this.tableData[i].exatername.indexOf(',') != -1){
            this.tableData[i].exatername = this.tableData[i].exatername.split(',');
          } else {
            let arrif = [];
            arrif.push(this.tableData[i].exatername);
            this.tableData[i].exatername = arrif[0];
          }
        }
        console.log(this.tableData)
        this.mergeRow();
      })
    },
    //操作列考场设置
    exaSetting(){
      this.exaSettingDialog = true;
    },
    handleSelectionChange(val){
      this.multipleSelection = val;
    },
    //获取监考员
    getTeacher(){
      let teacherInfo = {
        bzbm:this.company,
        xm:this.courseYpr
      };
      selectDetailsJob(teacherInfo).then(res=>{
        if(res.data.code == 200){
          this.yprList = res.data.data;
        }
      })
    },
    searchTeacher(){
      this.getTeacher();
      this.setTeacher(this.setTeacherInfo)
    },
    //点击设置监考员
    setTeacher(row){console.log("setTeacher, row =>", row);
      this.setTeacherInfo = row;
      this.setexaterId = row.id;
      this.showYprDialog = true;
      this.$nextTick(() => {
        if(typeof row.exaterid == 'string'){
          this.$refs.multipleTableExter.clearSelection()
            this.$refs.multipleTableExter.toggleRowSelection(
              this.yprList.find(item => {
                  return row.exaterid == item.id;
                }
              ), true);
        } else if(row.exaterid.length > 0){
          this.$refs.multipleTableExter.clearSelection()
          row.exaterid.forEach(res => {
            this.$refs.multipleTableExter.toggleRowSelection(
              this.yprList.find(item => {
                  return res == item.id;
                }
              ), true);
          })
        }
      })
    },
    //选择监考员点击确定
    exaTeaok(){
      let arr = [];
      let nameArr = [];
      if(this.multipleSelection.length > 0){
        if(typeof this.multipleSelection[0] == 'undefined'){
          var newArr = this.multipleSelection.slice(0);
          newArr.shift();
          this.multipleSelection = newArr
        }
        for (const Key in this.multipleSelection) {
          arr[Key] = this.multipleSelection[Key].id;
          nameArr[Key] = this.multipleSelection[Key].name; 
        }
      }
      let obj = {
        id:this.setexaterId,
        exaterid:arr.join(","),
        exatername:nameArr.join(",")
      }
      editRemark(obj).then(res=>{
        if(res.data.code == 200){
          this.showYprDialog = false;
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          });
          this.queryExaDetail();
        }
      })
    },
    //设置监考员删除标签
    delTag(index) {
      this.searchNameList.splice(index, 1);
    },
    searchSite(){
      this.selectJC();
    },
    //点击选择场地
    changeSite(row){
      this.setexaterId = row.id;
      // this.setexaterId = row.specialtyClassInfo.pid.toString();
      this.selectJC();
    },
    //作为考场
    setSiteid(row){
      console.log(row)
      if(this.setexaterId == ''){
        this.$message({
          type:'error',
          message:'请先选择需要设置考场的专业班次!',
        })
        return false
      }
      let obj = {
        id:this.setexaterId,
        siteid:row.id,
        exasite:row.cdmc
      }
      editRemark(obj).then(res=>{
        if(res.data.code == 200){
          this.$message({
            showClose: true,
            message: '操作成功！',
            type: 'success'
          });
          this.queryExaDetail();
        }
      })
    },
    //场地查询
    handleSearch: function () {
      if(this.searchKey == ''){
        this.handleNodeClick(this.eventData);
      } else {
        let obj = {
          pageNo:this.pageNo,
          pageSize: this.pageSize,
          cdmc:this.searchKey,
          ssjzwid:this.ssjzwid
        }
        placelike(obj).then(res=>{
          if(res.data.code == 200){
            this.treeTableData = res.data.data;
            this.total = res.data.data[0].tol;
          }
        })
      }
    },
    handleSizeChange: function (val) {
      this.pageSize = val;
      /* let obj = {
        pageNo:this.pageNo,
        pageSize: val,
        ssjzwid:this.ssjzwid,
        mangdeptid:this.mangdeptid,
        cdlxid:this.cdlxid
      }
      this.tjqueryplaceinfo(obj) */
      this.handleNodeClick(this.eventData);
    },
    handleCurrentChange: function (val) {
      this.pageNo = val;
      /* let obj = {
        pageNo:val,
        pageSize: this.pageSize,
        ssjzwid:this.ssjzwid,
        mangdeptid:this.mangdeptid,
        cdlxid:this.cdlxid
      }
      this.tjqueryplaceinfo(obj) */
      this.handleNodeClick(this.eventData);
    },
    //场所切换tab
    handleChangeType: function (showType) {
      this.showType = showType
      this.treeData1 = []
      this.treeData2 = []
      if (showType === 1) {
        getClassRoomTree('cdcsType').then(res => {
          if (res.data.code === 200) {
            this.treeData1 = res.data.data[0].childdictBizs;
          }
        })
      } else if (showType === 2) {
        getDeptTree().then(res => {
          if (res.data.code === 200) {
            this.treeData2 = res.data.data
          }
        })
      } else {
        getClassRoomTree('placetype').then(res => {
          if (res.data.code === 200) {
            this.treeData1 = res.data.data
          }
        })
      }
    },
    //点击场所树形节点
    handleNodeClick: function (event) {
      this.eventData = event;
      let obj = {};
      obj.pageNo = this.pageNo;
      obj.pageSize = this.pageSize;
      obj.cdmc = this.searchKey;
      if(this.showType === 1){
        obj.ssjzwid = event.id;
        this.ssjzwid = event.id;
      } else if (this.showType === 2){
        obj.mangdeptid = event.id;
        this.mangdeptid = event.id;
      } else if (this.showType === 3){
        obj.cdlxid = event.id;
        this.cdlxid = event.id;
      }
      this.tjqueryplaceinfo(obj)
    },
    //场地获取右侧表格数据
    tjqueryplaceinfo(obj){
      this.$refs.multipleTable.clearSelection();
      tjqueryplaceinfo(obj).then(res=>{
        if(res.data.code == 200){
          this.treeTableData = res.data.data;
          this.total = res.data.data[0].tol;
        }
      })
    },
    //场所弹框关闭
    handleSure: function () {
      this.dialogShow = false;
      this.handleSelection.length > 0 ? this.formData.studyRoom = this.handleSelection[0].cdmc : '';
    },
    arraySpanMethod({ row, column }) {
      const span = column["property"] + "-span";
      if (row[span]) {
        return row[span];
      }
    },
    choiceLink(index) {
      this.record = index;
    },
    checkboxChange(e) {
    },
    isEmpty(val) {
      return typeof val == "undefined" || val === null || val == "-";
    },
    isObject(val) {
      return Object.prototype.toString.call(val) === "[object Object]";
    },
    mergeRow() {
      let arr = [].concat(this.tableData);
      // arr.splice(index, 0, Object.assign({}, row))
      this.tableData = this.mergeData(arr);
    },
    mergeData(list) {
      // mergeTarge - 合并项依据
      // combineProp - 根据mergeTarge 进行合并的单元格属性
      return this.filterData(this.config, [].concat(list));
    },
    filterData(config, tableData, targetProp) {
      const { mergeTarget, combineProp } = config;
      // 叠加的合并条件
      combineProp.forEach((column) => {
        // console.log(column)
        // 记录合并项
        let combineCount = 1;
        if (this.isObject(column)) {
          return this.filterData.call(this, column, tableData, mergeTarget);
        }
        // 使用倒序遍历
        for (let i = tableData.length - 1; i >= 0; i--) {
          let curr = tableData[i],
            prev = tableData[i - 1];

          if (this.isEmpty(prev)) {
            // 已经循环完毕
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            break;
          }

          if (
            prev[targetProp] === curr[targetProp] &&
            prev[mergeTarget] === curr[mergeTarget] &&
            prev[`${column}`] === curr[`${column}`]
          ) {
            ++combineCount;
            curr[`${column}-span`] = {
              rowspan: 0,
              colspan: 0,
            };
          } else {
            curr[`${column}-span`] = {
              rowspan: combineCount,
              colspan: combineCount >= 1 ? 1 : 0,
            };
            prev[`${column}-span`] = {
              rowspan: 1,
              colspan: 1,
            };
            // 前后项不相符时，对combinecount进行重置
            combineCount = 1;
          }
        }
      });
      return tableData;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-tree-node__label{
  color: #004ca7;
}
/deep/.detail-input .el-textarea__inner {
  border: 0 none;
}
/deep/.el-checkbox-button__inner{
  width: 70px;
  border-radius: 6px;
  height: 36px;
  margin-bottom: 10px;
  border:1px solid rgb(220 223 230)
}
/deep/.el-checkbox-button:last-child .el-checkbox-button__inner{
  border-radius: 6px;
}
/deep/.el-checkbox-button:first-child .el-checkbox-button__inner{
  border-radius: 6px;
}
  .report-button {
    height: 28px;
    line-height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 50px auto;
    img {
      width: 17px;
      height: 17px;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      margin-right: 5px;
    }
  }
  .cjrc-button {
    height: 34px;
    line-height: 34px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 25px;
  }
  /deep/ .el-dialog {
    height: 800px;
    overflow: hidden;
  }
  /deep/ .el-tree {
    background-color: transparent;
  }
    .tabButton {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-left: 25px;
    margin-top: 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #E8EDF4;
    color: #0C4F9C;
    font-weight: 600;
    cursor: pointer;
  }
  .selectedStyle {
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin-left: 25px;
    margin-top: 8px;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #5080C0;
    color: #FDFEFB;
    font-weight: 600;
    cursor: pointer;
  }
@fontFamily:"Microsoft YaHei";
.xpaas-table-class {
  border: 1px solid #004ca7;
  border-radius: 9px;
  > ::v-deep div.el-table__header-wrapper {
    > table.el-table__header {
      > thead {
        > tr.xpaas-header-row-class {
          padding: 0;
          height: 76px;
          background-color: #edf2f9;
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          line-height: 20px;
          color: #004ca7;
          > th.xpaas-header-cell-class {
            font-weight: bold;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
  > ::v-deep div.el-table__body-wrapper {
    > table.el-table__body {
      > tbody {
        > tr.xpaas-row-class {
          > td.xpaas-header-cell-class {
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            background-color: #edf2f9;
            > div.cell {
              font-size: 16px;
              font-weight: bold;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
          > td.xpaas-cell-class {
            height: 76px;
            border-right: 1px solid #c7d7eb;
            border-left: 0;
            border-bottom: 1px solid #c7d7eb;
            > div.cell {
              font-weight: normal;
              font-family: @fontFamily;
              color: #004ca7;
            }
          }
        }
      }
    }
  }
}
.bk-lucj-expot-button {
  cursor: pointer;
  width: 90px;
  background: #fef1e8;
  border: 1px solid #f86900;
  box-sizing: border-box;
  margin: 0 auto 12px;
  border-radius: 6px;
  line-height: 28px;
  img{
    width: 13px;
    height: 13px;
    position: relative;
    top: 1px;
  }
  &:last-child {
    margin-bottom: 0px;
  }
  > span {
    color: #f86900;
    margin-left: 5px;
  }
}
.search-container {
  justify-content: flex-start !important;
}

.search-button {
  margin-left: 30px;
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 27px;
  background: #f1f8fe;
  border: 1px solid #51aef6;
  border-radius: 6px;

  > span {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #51aef6;
  }

  > img {
    width: 19px;
    height: 19px;
    margin-right: 4px;
  }
}

.table-container {
  margin-top: 30px;

  .el-table td,
  .el-table th.is-leaf,
  .el-table--border,
  .el-table--group {
    border-color: #c7d7eb;
  }

  .el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }

  .el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }

  .wrapper-button {
    display: flex;
    flex-direction: column;
    align-items: center;

    > div {
      margin-bottom: 8px;
    }
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/special.less";

.basic-button1 {
  width: fit-content;
  min-width: 90px;
  padding: 0 10px;
  height: 27px;
  line-height: 26px;
  border-radius: 6px;
  font-size: 16px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  text-align: center;
  margin-right: 10px;
  box-sizing: border-box;
  cursor: pointer;
  color: #004ca7;
  border: 1px solid #004ca7;
  background: #edf2f9;
}
.table-container2::v-deep .el-calendar-table__row td,
.table-container2::v-deep .el-calendar-table .el-calendar-day,
.table-container2::v-deep .el-calendar-table__row {
  height: 44px !important;
}
.table-container2 {
  margin-top: 85px !important;
  width: 45% !important;
}
.table-container3 .table-data {
  min-height: 497px;
}
.bottom-block {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  .text {
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    line-height: 39px;
    color: #004ca7;
  }
}
.content-div {
  max-width: 200px;
}
.comment-div {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.table-container::v-deep .el-table__header th {
  border-color: #c7d7eb !important;
  padding-left: 10px;
}
.filter-button::v-deep .el-radio-button .el-radio-button__inner {
  border-radius: 6px !important;
  border: 1px solid rgb(245, 134, 106);
  color: rgb(245, 134, 106);
  background-color: rgb(254, 237, 226);
}
.filter-button::v-deep
  .el-radio-button__orig-radio:checked
  + .el-radio-button__inner {
  border: 1px solid rgb(245, 134, 106);
  color: white;
  background-color: rgb(245, 134, 106);
}
.wrapper-container {
  width: 1711px;
  margin: 0 auto;
}
.table-container {
  margin-top: 30px;

  .table-data {
    width: 100%;
    border: 0.8px solid #004ca7;
    border-radius: 9px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #004ca7;
  }
}

.save-button {
  width: 87px;
  height: 36px;
  line-height: 36px;
  background: #fff6ef;
  border: 1px solid #f3b815;
  border-radius: 6px;
  font-size: 18px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #f3b815;
  text-align: center;
  margin: 82px auto;
}

.zuoyou {
  width: 200px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
</style>
